<template>
	<div class="m-space-info">
		<div class="banner"></div>
		<div class="part1">
			<div class="face">
				<img :src="userinfo.user_img" v-if="userinfo.user_img">
				<img src="../../assets/images/default_img.jpg" v-else>
			</div>
			<div class="relation">
				<div class="count">
					<div class="fans">
						<span class="num">10</span>
						<span class="type">粉丝</span>
					</div>
					<div class="follow">
						<span class="num">10</span>
						<span class="type">关注</span>
					</div>
					<div class="likes">
						<span class="num">10</span>
						<span class="type">获赏</span>
					</div>
				</div>
				<div class="follow-btn">
					<van-button text="编辑资料" block @click="$router.push({name: 'Edit'})"/>
				</div>
			</div>
		</div>
		<div class="part2">
			<div class="base">
				<span class="name">{{userinfo.name}}</span>
				<span class="gender">♂</span>
				<span class="level">lv3</span>
			</div>
			<div class="desc">
				<span class="content">{{userinfo.desc || '这个人很神秘，什么都没有写'}}</span>
				<span class="spread-btn" @click="isShow = !isShow">{{isShow ? '收起' : '展开'}}</span>
			</div>
			<div class="tags" v-if="isShow">
				<span>uid:{{userinfo.id}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false
			}
		},
		props: {
			userinfo: {
				type: Object,
				default() {
					return {}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-space-info{
		background-color: #fff;
		.banner{
			width: 100%;
			height: 90px;
			background-image: url(../../assets/images/bannerTop_new.png);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
		}
		.part1{
			padding: 0 12px;
			display: flex;
			justify-content: space-between;
			.face{
				width: 84px;
				height: 84px;
				img{
					width: 84px;
					height: 84px;
					border-radius: 42px;
					margin-top: -6px;
				}
			}
			.relation{
				width: 220px;
				padding-top: 8px;
				.count{
					display: flex;
					>div {
						position: relative;
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.num{
							color: #212121;
							font-size: 14px;
							line-height: 16px;
						}
						.type{
							font-size: 12px;
							color: #999;
						}
						&::after{
							content: '';
							display: block;
							width: 1px;
							height: 16px;
							background: #e7e7e7;
							position: absolute;
							right: 0;
							top: 50%;
							transform: translateY(-50%);
						}
						&:last-child::after{
							display: none;
						}
					}
				}
				.follow-btn{
					margin-top: 12px;
					.van-button{
						height: 30px;
						background: #fff;
						border: 1px solid #fb7299;
						color: #fb7299;
					}
				}
			}
		}
		.part2{
			padding: 12px;
			.base{
				.name{
					font-size: 18px;
					color: #212121;
					display: inline-block;
					max-width: 235px;
					vertical-align: middle;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.gender{
					margin-left: 4px;
					display: inline-block;
					vertical-align: middle;
				}
				.level{
					margin-left: 6px;
					vertical-align: middle;
				}
			}
			.desc{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.content{
					font-size: 13px;
					color: #999;
					width: 313px;
					height: 17px;
					line-height: 17px;
					margin-top: 8px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.spread-btn{
					font-size: 13px;
					color: #1389bf;
					margin-top: 6px;
				}
			}
			.tags{
				margin-top: 7px;
				margin-bottom: -5px;
				span{
					display: inline-block;
					font-size: 14px;
					padding: 2px 5px;
					margin-right: -10px;
					color: #505050;
					background-color: #f4f4f4;
					border-radius: 2px;
					transform: scale(.71);
					transform-origin: left;
				}
			}
		}
	}
</style>